<template>
	<view class="sub-kefu-content">
		<view class="order-top">
			<view class="kefu-title">
				联系客服
			</view>
			<image src="../../static/common/sub-order-back.png" class="sub-back-icon" @tap="backpage"></image>
		</view>
		
		<view class="big-title">微信扫码添加客服微信</view>
		<view class="small-title">客服微信号:<text @tap="CopyWX(kefu.weixin)">{{kefu.weixin}}</text></view>
		<image :src="getImg(kefu.qrcode)" class="kefu-wx" @tap="saveQrcode(kefu.qrcode)"></image>
		
		<view class="kefu-note">有问题请直接微信联系客服</view>
		<view class="kefu-small-note">请勿发语音</view>
		
		<view class="notes">
			<view class="note-item">
				1. 请准备好您的问题，添加客服微信<text>先发送您的ID号</text>
				，然后发送具体问题，由于咨询量较大，若遇到回复
				不及时，还望请耐心等待； 
			</view>
			<view class="note-item" style="margin-top: 50upx;">
				2. 客服工作时间： 09:30-12:30；14:00-19:00。其他非工作时间请回到 查看常见问题。 
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"subKeFu",
		data(){
			return{
				apptoken:"",
				kefu:""
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync('apptoken');
			this.getKefu();
			//this.kefu = uni.getStorageSync('kefu');
			//console.log(this.kefu)
		},
		methods:{
			getImg(img){
				return this.$CommonJS.getBaseImgUrl(img)
			},
			backpage(){
				this.$CommonJS.navigateBack();
			},
			CopyWX(wx){
				//复制微信号
				console.log(wx)
				const _this = this;
				uni.setClipboardData({
				    data: wx,
				    success: function () {
				        _this.$CommonJS.showToast("微信复制成功")
				    }
				});
			},
			saveQrcode(qrcode){
				
				//图片预览，保存到本地相册
				const _this = this;
				const img = this.$CommonJS.getBaseImgUrl(qrcode);
				console.log(img)
				uni.previewImage({
						urls: [img],
						longPressActions: {
								itemList: ['分享给微信好友','分享到微信朋友圈', '保存图片'],
								success: function(data) {
										console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
										if(data.tapIndex == 0){
											//分享微信好友
											uni.share({
											    provider: "weixin",
											    scene: "WXSceneSession",
											    type: 2,
											    imageUrl: img,
											    success: function (res) {
											        console.log("success:" + JSON.stringify(res));
											    },
											    fail: function (err) {
											       _this.$CommonJS.showToast("分享失败");
											    }
											});
										}else if(data.tapIndex == 1){
											//分享到微信朋友圈
											uni.share({
											    provider: "weixin",
											    scene: "WXSenceTimeline",
											    type: 2,
											    imageUrl: img,
											    success: function (res) {
											        console.log("success:" + JSON.stringify(res));
											    },
											    fail: function (err) {
											        console.log("fail:" + JSON.stringify(err));
															 _this.$CommonJS.showToast("分享失败");
											    }
											});
										}else if(data.tapIndex == 2){
											//保存到本地
											uni.saveImageToPhotosAlbum({
													filePath: img,
													success: function () {
															_this.$CommonJS.showToast("图片保存成功");
													},
													fail(err) {
														_this.$CommonJS.showToast("图片保存失败");
													}
											});
										}
										
								},
								fail: function(err) {
										console.log(err.errMsg);
								}
						}
				});
				
			},
			getKefu(){
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.kefu,
					data:{apptoken:this.apptoken},
					success(res) {
						console.log(res)
						if(res.data.success){
							_this.kefu = res.data.data;
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					},
					fail(err) {
						_this.$CommonJS.showToast(err)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.sub-kefu-content{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		/* background:linear-gradient(180deg,rgba(255,234,240,1) 0%,rgba(255,234,211,1) 100%); */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		letter-spacing: 0.5px;
	}
	.order-top{
		width: 100%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-top:72upx ;
		/* #ifdef H5 */
		margin-top: 36upx;
		/* #endif */
		
	}
	.sub-back-icon{
		width:58upx ;
		height: 58upx;
		position: absolute;
		top: 0;
		left:33upx ;
	}
	.kefu-title{
		font-size:20px;
		font-family:Alibaba PuHuiTi;
		font-weight:500;
		color:rgba(244,99,122,1);
		opacity:1;
	}
	.big-title{
		height:42upx;
		font-size:20px;
		font-family:BigYoungBoldGB2.0;
		font-weight:400;
		line-height:42upx;
		color:rgba(17,23,57,1);
		letter-spacing:1px;
		opacity:1;
		margin-top: 92upx;
		margin-bottom: 18upx;
	}
	.small-title{
		height:31upx;
		font-size:12px;
		font-family:Alibaba PuHuiTi;
		font-weight:400;
		line-height:31upx;
		color:rgba(244,99,122,1);
		opacity:1;
		margin-bottom: 92upx;
	}
	.kefu-wx{
		width: 325upx;
		height: 325upx;
		margin-bottom: 92upx;
	}
	.kefu-note{
		font-size: 12px;
		color: #6B778D;
		
	}
	.kefu-small-note{
		font-size: 12px;
		color: #F4637A;
		margin-top: 8upx;
		margin-bottom: 65upx;
	}
	.notes{
		width:573upx;
		height:292upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 5upx 11upx rgba(0,0,0,0.16);
		opacity:1;
		border-radius:27upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 47upx;
	}
	.note-item{
		font-size: 12px;
		color: #111739;
		line-height: 35upx;
	}
	.note-item text{
		color: #F4637A;
	}
</style>
